<template>
  <div>
    <el-row type="flex" justify="space-between" class="card-list-con">
      <el-row type="flex">
        <span class="card-list-con-color" :style="{ backgroundColor: templateList.color }"></span>
        <div>
          <h2 class="card-list-con-title">{{ templateList.templateName }}</h2>
          <div class="card-list-con-update">{{ $t('common.base.lastUpdate') }}: {{ templateList.updateUserName }}</div>
          <div class="card-list-con-updatetime">{{ $t('common.base.column.updateTime') }}: {{ updateTime }}</div>
        </div>
      </el-row>

      <div class="settings" v-if="isShowSwitch">
        <el-switch :value="templateList.enabled" :active-value="1" :inactive-value="0" @change="handleSwitch"> </el-switch>
        <i class="iconfont icon-tuozhuaipaixu drag-icon"></i>
      </div>
    </el-row>
    <el-row class="card-list-operation" type="flex">
      <div class="card-list-operation-del pub-btn" @click="handleClickDel(templateList)" v-if="!templateList.isSystem">
        <i class="iconfont icon-delete">{{ $t('common.base.delete') }}</i>
      </div>
      <div class="card-list-operation-modify pub-btn" @click="handleClickEdit(templateList)">
        <i class="iconfont icon-edit-square">{{ $t('common.base.edit') }}</i>
      </div>
    </el-row>
  </div>
</template>

<script>
import { defineComponent, ref, computed } from 'vue';

import { formatDate } from 'pub-bbx-utils';

export default defineComponent({
  name: 'project-card-list',
  props: {
    templateList: {
      type: Object,
      default: () => ({}),
    },
    // 是否显示开关
    isShowSwitch: {
      type: Boolean,
      default: false
    }
  },
  emits: ['changeSwitch', 'handleDelete'],
  setup(props, { emit }) {
    const dialogVisible = ref(false);

    // 更新时间转换
    const updateTime = computed(() => {
      return formatDate(props?.templateList?.updateTime, 'YYYY-MM-DD HH:mm:ss');
    });

    // 点击开关
    const handleSwitch = val => {
      emit('changeSwitch', val, props.templateList);
    };

    // 点击删除
    const handleClickDel = val => {
      emit('handleDelete', val);
    };

    // 点击编辑
    const handleClickEdit = row => {
      emit('clickEdit', row);
    };

    return {
      dialogVisible,
      updateTime,
      handleSwitch,
      handleClickDel,
      handleClickEdit,
    };
  },
});
</script>
<style lang="scss" scoped>
.card-list {
  padding-right: 12px;
  &-con {
    padding: 20px;
    height: calc(100% - 32px);
    &-color {
      display: block;
      width: 14px;
      min-width: 14px;
      height: 14px;
      margin: 3px 5px 0 0;
      border-radius: 50%;
    }
    &-title {
      height: 40px;
      margin-bottom: 12px;
      @include text-ellipsis-2;
      word-break: break-all;
      font-size: 16px;
      color: #333333;
    }
    &-update {
      margin-bottom: 8px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #666666;
      @include text-ellipsis-2;
      word-break: break-all;
    }
    &-updatetime {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #666666;
      @include text-ellipsis-2;
      word-break: break-all;
    }
    .settings {
      display: flex;
      flex-direction: column;
      .drag-icon {
        display: none;
        margin-top: 23px;
        font-size: 12px;
        text-align: right;
      }
    }
    &:hover {
      cursor: move;
      .drag-icon {
        display: block !important;
      }
    }
  }

  &-operation {
    height: 32px;
    line-height: 32px;
    border-top: 1px solid#F5F5F5;
    .pub-btn {
      cursor: pointer;
      flex: 1;
      text-align: center;
      color: #999999;
    }
    i {
      font-size: 12px;
      &::before {
        margin-right: 8px;
      }
    }
    &-del {
      border-right: 1px solid #f5f5f5;
      &:hover {
        color: $color-danger;
      }
    }
    &-modify {
      &:hover {
        color: $color-primary;
      }
    }
  }
}
</style>

